<template>
  <div class="left-chart-1">
    <div class="lc1-header">司机驾驶时长排行</div>
    <div class="chart">
       <ve-histogram
        style="width:100%;height:100%;"
        :data="chartData"
        :extend="chartExtend"
      ></ve-histogram>
    </div>

  </div>
</template>

<script>
export default {
  name: 'LeftChart1',
  data () {
    this.chartExtend = {

      xAxis: {
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#07536a'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#07536a'
          }
        }
      },
      legend: {
        textStyle: {
          color: '#fff'
        }
      },
      yAxis: {
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#07536a'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#07536a'
          }
        }
      },
      // height: 170,
      series: {
        barWidth: 10
      },
      tooltip: {
        trigger: 'none'
      }
    }
    return {
      chartData: {
        columns: ['车牌', '报警数'],
        unit: '日',
        rows: [
          { 车牌: '津1', 报警数: 150 },
          { 车牌: '津12', 报警数: 217 },
          { 车牌: '津13', 报警数: 221 },
          { 车牌: '津111', 报警数: 271 },
          { 车牌: '津112', 报警数: 471 }
        ]
      }
    }
  }
}
</script>

<style  lang="less" scoped>
.left-chart-1{
   background: url(./img/panel.png) center no-repeat;
  background-size: 100% 100%;
}
  .lc1-header {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // font-size: 16px;
    // margin-bottom: 20px;
    color:#fff;
    line-height: 20px;
    font-size: 16px;
    text-indent: 20px;
    margin-top: 10px;
  }
  .chart{
    width: 100%;
    height: calc(100% - 40px);
  }
</style>
